<template>
  <div class="basic-chart">
    <div class="basic-chart__title">{{ title }}</div>

    <!-- 图表容器 -->
    <div class="basic-chart__body"></div>
  </div>
</template>

<script>
// 引入 echarts
import * as echarts from "echarts";

export default {
  name: "basic-chart",

  props: {
    title: { type: String, default: "访问量" },
    option: { type: Object, default: () => ({}) },
  },

  watch: {
    option: {
      handler(newVal) {
        // option 改变了，就重新在 setOption 一次即可
        this.myChart.setOption(newVal);
      },

      deep: true,
    },
  },

  mounted() {
    // 图表初始化, 封装成一个组件的话，寻找DOM元素时一定要注意不要如下这样写。这里是全局找DOM
    // const myChart = echarts.init(document.querySelector(".basic-chart__body"));

    // 应该使用当前组件的DOM去寻找
    //    1. 给元素添加 ref 标记
    //    2. this.$el.querySelector()
    this.myChart = echarts.init(this.$el.querySelector(".basic-chart__body"));

    // 做配置
    this.myChart.setOption(this.option);
  },
};
</script>

<style lang="scss" scoped>
.basic-chart {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  background-color: #fff;

  &__title {
    padding-left: 16px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #000;
  }

  &__body {
    flex: 1;
  }
}
</style>
